<template>
  <div class="address-list">
    <betterScroll>
      <div v-for="(item,index) in list" :key="index" :class="item.ok ? 'address-item' : 'address-false'">
        <div class="name" @click="select_add(item)">
          <span v-if="item.ok==1">{{item.name}}</span>
          <span v-else>{{item.name}}  (不在服务范围)</span>
          <span>{{item.phone}}</span>
        </div>
        <div class="address" @click="select_add(item)">
          <div class="add">服务地址：{{item.three}}{{item.adress}}</div>
          <div class="info">车辆信息：{{item.car_card}}&nbsp;&nbsp;{{item.car_xing}}&nbsp;&nbsp;{{item.car_color}}&nbsp;&nbsp;{{item.car_wei}}</div>
        </div>
        <div class="handler">
          <mu-radio v-if="item.ok == 1" label='设为默认地址' v-model="moren" :value='item.id' @change='set_moren'></mu-radio>
          <div>
            <XButton :plain='true' :mini='true' type='warn' @click.native='edit_add(item.id)'>编辑</XButton>
            <XButton :plain='true' :mini='true' type='warn' @click.native="deleteAdd(item.id)" v-if="item.id != moren">删除</XButton>
          </div>
        </div>
      </div>
    </betterScroll>
    <XButton type='warn' class="xbtn" @click.native="add_add">添加地址</XButton>
  </div>
</template>

<script>
  import {
    XInput,
    Group,
    XButton
  } from 'vux'
  import betterScroll from '@/components/betterScroll';
  import checkLogin from "@/mixins/checkLogin.js";
  import setTitle from '@/mixins/setTitle.js'
import {mapMutations,mapState} from 'vuex';

  export default {
    data() {
      return {
        list: [],
        moren: ''
      }
    },
    created() {
      this.SET_TX_MAP({})    /* 清空地址 */
      this.get_List();
    },
    methods: {
      ...mapMutations(['SET_IF_MRADD','SET_SELECTED_ADD','SET_TX_MAP']),
      get_List() {
        this.$axios.get( '/Api/Adress/get_adress', {
          params: {
            uid: this.id,
            faceId:this.$route.query.faceId,
            shopId:this.$route.query.shopId,
          }
        }).then(({
          data
        }) => {
          this.list = data;
          this.list.map(m=>{
            m.map = JSON.parse(m.map);
          })
          data.map(m => {
            if (m.status == 1) {
              this.moren = m.id;
            }
          })
        })
      },
      add_add() {
        this.$router.push({
          path: '/editAddress',
          query:{
            faceId:this.$route.query.faceId,
            shopId:this.$route.query.shopId,
          }
        })
      },
      set_moren(val) {
        var params = {
          uid: this.id,
          id: val
        }
        console.log(val);
        this.$axios.get( '/Api/Adress/sz_mr_adress', {
          params
        }).then(({
          data
        }) => {
        })
      },
      deleteAdd(val) {
        var params = {
          id: val
        }
        this.$axios.get( '/Api/Adress/delete_adress', {
          params
        }).then(({
          data
        }) => {
          if (data.status == 1) {
            this.$vux.alert.show({
              title: '提示',
              content: data.msg
            })

          }
        }).then(res => {
          this.get_List();
        })
      },
      edit_add(id) {
        this.$router.push({
          path: '/editAddress',
          query: {
            id
          }
        })
      },
      select_add(add) {
        if(add.ok == 0){
          this.$vux.alert.show({
              title: '提示',
              content: '不在配送范围，不能选择',
          })
          return false;
        }
        this.SET_IF_MRADD(false);
        this.SET_SELECTED_ADD(add);
        this.$router.go(-1);
      }
    },
    components: {
      Group,
      XInput,
      XButton,
      betterScroll
    },
    mixins: [checkLogin,setTitle]
  }

</script>

<style lang='scss' scoped>
  .address-list {
    padding-bottom: 80px;
    height: 100%;
    position: relative;
    background: #f0f0ff;
    .address-item {
      font-size: .373333rem/* 28/75 */
      ;
      padding-left: .4rem/* 30/75 */
      ;
      background: #ffffff;
      margin-bottom: $bot;
      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.533333rem/* 115/75 */
        ;
        border-bottom: 1px dashed #f0f0ff;
        padding-right: .666667rem/* 50/75 */
        ;
      }
      .address {
        padding: .266667rem/* 20/75 */
        0;
        line-height: 2;
        border-bottom: 1px solid #f0f0f0;
        .info {
          color: #5b5b5b;
          font-size: .32rem/* 24/75 */
          ;
        }
        .add {
          word-wrap: break-word;
        }
      }
      .handler {
        height: 1.266667rem/* 95/75 */
        ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .533333rem/* 40/75 */
        ;
        .mu-radio-label {
          font-size: .373333rem/* 28/75 */
          ;
        }
        .weui-btn {
          margin-left: .32rem/* 24/75 */
          ;
        }
        .weui-btn+.weui-btn {
          margin-top: 0;
        }
      }
    }

    .address-false {
      font-size: .373333rem/* 28/75 */
      ;
      color:#a3a3a3;
      padding-left: .4rem/* 30/75 */
      ;
      background: #fcfcfc;
      margin-bottom: $bot;
      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.533333rem/* 115/75 */
        ;
        border-bottom: 1px dashed #f0f0ff;
        padding-right: .666667rem/* 50/75 */
        ;
      }
      .address {
        padding: .266667rem/* 20/75 */
        0;
        line-height: 2;
        border-bottom: 1px solid #f0f0f0;
        .info {
          color: #5b5b5b;
          font-size: .32rem/* 24/75 */
          ;
        }
        .add {
          word-wrap: break-word;
        }
      }
      .handler {
        height: 1.266667rem/* 95/75 */
        ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .533333rem/* 40/75 */
        ;
        .mu-radio-label {
          font-size: .373333rem/* 28/75 */
          ;
        }
        .weui-btn {
          margin-left: .32rem/* 24/75 */
          ;
        }
        .weui-btn+.weui-btn {
          margin-top: 0;
        }
      }
    }

    .xbtn {
      position: fixed;
      left: 0;
      bottom: 0;
      border-radius: 0;
      &:after {
        border-radius: 0;
      }
    }
  }

</style>
